<template>
    <div>
        <div class="container" id="content">

            <div class="button-group">
                <el-button type="primary" icon="el-icon-printer" @click="printForm">打印</el-button>
                <!-- <button id="convertButton" @click="downloadPdf">下载 PDF</button> -->
                <button v-if="isEditMode" class="save-button" @click="saveData">保存</button>
                <button @click="goBack">返回</button>
                <button @click="goToList">列表</button>
            </div>
            <h2>员工入职资料表</h2>
            <span style="float: left;">
                申请职位：
                <input type="text" id="name" class="underline-input" v-model="entr.applicationPosition"
                    :readonly="!isEditMode" />
            </span>
            <span class="right-float">
                申请日期：
                <input type="text" class="underline-input1" v-model="entr.applicationYear" :readonly="!isEditMode" />年
                <input type="text" class="underline-input1" v-model="entr.applicationMonth" :readonly="!isEditMode" />月
                <input type="text" class="underline-input1" v-model="entr.applicationDay" :readonly="!isEditMode" />日
            </span>
            <form style="margin-top: 5px;">
                <table>
                    <tbody>
                        <tr>
                            <td colspan="10" style="text-align: left">一、个人基本资料</td>
                        </tr>
                        <tr>
                            <td colspan="1">姓名</td>
                            <td colspan="2"><input v-model="entr.name" :readonly="!isEditMode"></td>
                            <td colspan="1">性别</td>
                            <td colspan="1"><input v-model="entr.gender" :readonly="!isEditMode"></td>
                            <td colspan="1">出生年月</td>
                            <td colspan="2"><input v-model="entr.birth" :readonly="!isEditMode"></td>
                            <td rowspan="7" colspan="2" class="img">
                                <span style="float: inline-end" id="uploadSpan" :style="{ display: uploadSpanDisplay }">
                                    <div class="upload-area"
                                        :class="{ 'edit-mode': isEditMode, 'view-mode': !isEditMode }">
                                        <i class="upload-icon">+</i>
                                        <div class="upload-text">上传照片</div>
                                        <input title="图片" type="file" id="imageUpload" accept="image/*"
                                            @change="handleImageUpload" class="upload-input" readonly />
                                    </div>
                                </span>
                                <span id="previewSpan" :style="{ display: previewSpanDisplay }">
                                    <div class="preview-container">
                                        <img class="preview-image" id="preview" :src="previewImageSrc" alt="预览图片" />
                                        <div class="preview-actions">
                                            <button id="deleteBtn" @click.prevent="deleteImage" class="preview-delete">
                                                <i class="delete-icon">×</i>
                                            </button>
                                        </div>
                                    </div>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>籍贯</td>
                            <td><input v-model="entr.hometown" :readonly="!isEditMode"></td>
                            <td>身高</td>
                            <td colspan="2"><input class="input-small" v-model="entr.height" :readonly="!isEditMode">cm
                            </td>
                            <td>文化程度</td>
                            <td colspan="2"><input class="input-medium" v-model="entr.educationLevel"
                                    :readonly="!isEditMode"></td>
                        </tr>
                        <tr>
                            <td>专业</td>
                            <td colspan="2"><input v-model="entr.major" :readonly="!isEditMode"></td>
                            <td colspan="2">毕业学校</td>
                            <td colspan="3"><input class="input-large" v-model="entr.graduationSchool"
                                    :readonly="!isEditMode"></td>
                        </tr>
                        <tr>
                            <td>婚否</td>
                            <td><input class="input-mini" v-model="entr.married" :readonly="!isEditMode"></td>
                            <td>健康状况</td>
                            <td><input class="input-small" v-model="entr.healthCondition" :readonly="!isEditMode"></td>
                            <td>语言能力</td>
                            <td colspan="3" class="language-cell">
                                语&nbsp;&nbsp;&nbsp;&nbsp;种：<input class="input-mini" v-model="entr.language"
                                    :readonly="!isEditMode">
                                （&nbsp;&nbsp;&nbsp;&nbsp;<input class="input-mini" v-model="entr.languageLevel"
                                    :readonly="!isEditMode">&nbsp;&nbsp;&nbsp;&nbsp;）&nbsp;&nbsp;&nbsp;&nbsp;级
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">其他技能或持有专业证照</td>
                            <td colspan="2"><input class="input-large" v-model="entr.otherSkills"
                                    :readonly="!isEditMode"></td>
                            <td>特长</td>
                            <td colspan="2"><input class="input-medium" v-model="entr.specialty"
                                    :readonly="!isEditMode"></td>
                        </tr>
                        <tr></tr>
                        <tr>
                            <td colspan="2">现住地址</td>
                            <td colspan="3"><input class="input-xlarge" v-model="entr.currentAddress"
                                    :readonly="!isEditMode"></td>
                            <td>联系电话</td>
                            <td colspan="2"><input class="input-medium" v-model="entr.contactPhone"
                                    :readonly="!isEditMode"></td>
                        </tr>
                        <tr>
                            <td colspan="2">职位信息来源</td>
                            <td colspan="2"><input v-model="entr.jobInfoSource" :readonly="!isEditMode"></td>
                            <td>期望薪酬</td>
                            <td><input v-model="entr.expectedSalary" :readonly="!isEditMode"></td>
                            <td>最快到职日期&nbsp;&nbsp;</td>
                            <td colspan="2">
                                <input type="text" class="underline-input1" v-model="entr.earliestStartYear"
                                    :readonly="!isEditMode">年
                                <input type="text" class="underline-input1" v-model="entr.earliestStartMonth"
                                    :readonly="!isEditMode">月
                                <input type="text" class="underline-input1" v-model="entr.earliestStartDay"
                                    :readonly="!isEditMode">日
                            </td>
                        </tr>
                        <tr></tr>
                        <tr>
                            <td rowspan="2" colspan="2">紧急联系人</td>
                            <td colspan="3">姓名（尽量为直系亲属）</td>
                            <td colspan="2"><input v-model="entr.emergencyContactName" :readonly="!isEditMode"></td>
                            <td>关系</td>
                            <td colspan="2"><input v-model="entr.emergencyContactRelation" :readonly="!isEditMode"></td>
                        </tr>
                        <tr>
                            <td colspan="2">通讯地址</td>
                            <td colspan="3">
                                <input v-model="entr.emergencyContactAddress" :readonly="!isEditMode">
                            </td>
                            <td>电话</td>
                            <td colspan="2"><input v-model="entr.emergencyContactPhone" :readonly="!isEditMode"></td>
                        </tr>
                        <tr>
                            <td colspan="10" style="text-align: left">
                                二、受教育程度或培训经历
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">学校名称</th>
                            <th>专业</th>
                            <th>学历</th>
                            <th>入学年月</th>
                            <th>离校年月</th>
                            <th>毕业或结业</th>
                            <th>有否证件</th>
                            <th>备注</th>
                        </tr>
                        <tr v-for="(edu, index) in educations" :key="'edu' + index">
                            <td colspan="2">
                                <input v-model="edu.schoolName" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="edu.major" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="edu.education" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="edu.admission" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="edu.graduation" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="edu.graduationStatus" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="edu.hasCertificate" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="edu.note" :readonly="!isEditMode">
                            </td>
                        </tr>
                        <tr v-if="isEditMode">
                            <td colspan="9">
                                <button type="button" class="add-row-btn" @click.prevent="addEducation">新增教育经历</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="10" style="text-align: left">
                                三、工作经历
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">单位名称</th>
                            <th>到职年月</th>
                            <th>离职年月</th>
                            <th>工作职务</th>
                            <th>底薪</th>
                            <th>直系主管</th>
                            <th>离职原因</th>
                            <th>查询电话</th>
                        </tr>
                        <tr v-for="(work, index) in works" :key="'work' + index">
                            <td colspan="2">
                                <input v-model="work.companyName" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="work.join" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="work.leave" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="work.jobTitle" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="work.baseSalary" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="work.directSupervisor" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="work.leaveReason" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="work.inquiryPhone" :readonly="!isEditMode">
                            </td>
                        </tr>
                        <tr v-if="isEditMode">
                            <td colspan="9">
                                <button type="button" class="add-row-btn" @click.prevent="addWork">新增工作经历</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="10">
                                <span class="left-float">
                                    详述工作经验（请说明在以往的工作中主要负责和熟悉的部分，并取得了哪些成就）：
                                </span>
                                <textarea spellcheck="false" id="workExperience" placeholder=""
                                    style="width: 100%; height: 100px" v-model="entr.workExperienceDetail"
                                    :readonly="!isEditMode">
                                </textarea>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="10" style="text-align: left">
                                四、家庭成员
                            </td>
                        </tr>
                        <tr>
                            <th>姓名</th>
                            <th>称谓</th>
                            <th>年龄</th>
                            <th colspan="3">任职机构或详细地址</th>
                            <th>职称</th>
                            <th colspan="2">联络电话</th>
                        </tr>
                        <tr v-for="(family, index) in families" :key="'family' + index">
                            <td>
                                <input v-model="family.name" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="family.relation" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input type="text" style="width: 50px" v-model="family.age" :readonly="!isEditMode">
                            </td>
                            <td colspan="3">
                                <input v-model="family.address" :readonly="!isEditMode">
                            </td>
                            <td>
                                <input v-model="family.title" :readonly="!isEditMode">
                            </td>
                            <td colspan="2">
                                <input v-model="family.phone" :readonly="!isEditMode">
                            </td>
                        </tr>
                        <tr v-if="isEditMode">
                            <td colspan="9">
                                <button type="button" class="add-row-btn" @click.prevent="addFamily">新增家庭成员</button>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 0px">声&nbsp;明：</td>
                            <td colspan="9" style="border: 0px; text-align: left">
                                1、申请人承诺未隐瞒任何身体疾病，否则由此造成的一切后果由申请人自行承担，申请人隐瞒的疾病导致其不能胜任申请职位的，公司有权终止劳动合同并无需支付任何经济补偿金或赔偿金。
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 0px"></td>
                            <td colspan="9" style="border: 0px; text-align: left">
                                2、本人慎重申明以上所填各项及所持证件均属实，如有虚伪记载，愿受开除处分。
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p style="display: flex;align-items: center;margin: 0px;">
                    申请人签名：
                    <img :src="entr.signature" alt="签名" style="width: 100px; height: 50px; border: 0px;" />
                    <span class="right-float">
                        日期:
                        <input type="text" class="underline-input1" v-model="entr.signYear" :readonly="!isEditMode">年
                        <input type="text" class="underline-input1" v-model="entr.signMonth" :readonly="!isEditMode">月
                        <input type="text" class="underline-input1" v-model="entr.signDay" :readonly="!isEditMode">日
                    </span>
                </p>
            </form>
        </div>
    </div>
</template>

<script>
import html2pdf from "html2pdf.js";
import { getEmployeeFileDetail, saveOrUpdateEmployeeFile } from '@/api/employee'
// import { da } from "element-plus/es/locale";
export default {
    name: "employeeFileInfoView",
    data() {
        return {
            previewImageSrc: "",
            uploadSpanDisplay: "none",
            previewSpanDisplay: "inline",
            isEditMode: false,
            id: null,
            entr: {
                applicationPosition: "", // 申请职位
                applicationYear: "", // 申请日期
                applicationMonth: "",
                applicationDay: "",
                name: "", // 姓名
                gender: "", // 性别
                birth: "", // 出生年月
                hometown: "", // 籍贯
                height: "", // 身高
                educationLevel: "", // 文化程度
                major: "", // 专业
                graduationSchool: "", // 毕业学校
                married: "", // 婚否
                healthCondition: "", // 健康状况
                language: "", // 语言能力
                languageLevel: "", // 语言能力级别
                otherSkills: "", // 其他技能或持有专业证照
                specialty: "", // 特长
                currentAddress: "", // 现住地址 
                contactPhone: "", // 联系电话
                jobInfoSource: "", // 职位信息来源
                expectedSalary: "", // 期望薪酬
                earliestStartYear: "", // 最快到职日期年
                earliestStartMonth: "", // 最快到职日期月
                earliestStartDay: "", // 最快到职日期日
                emergencyContactName: "", // 紧急联系人姓名
                emergencyContactRelation: "", // 紧急联系人关系
                emergencyContactAddress: "", // 紧急联系人通讯地址
                emergencyContactPhone: "", // 紧急联系人电话  
                schoolName: "", // 学校名称
                schoolMajor: "", // 专业
                schoolEducation: "", // 学历
                admission: "", // 入学年月
                graduation: "", // 离校年月
                graduationStatus: "", // 毕业或结业
                hasCertificate: "", // 有否证件
                schoolNote: "", // 备注
                schoolName2: "", // 学校名称  
                schoolMajor2: "", // 专业
                schoolEducation2: "", // 学历
                admission2: "", // 入学年月
                graduation2: "", // 离校年月
                graduationStatus2: "", // 毕业或结业
                hasCertificate2: "", // 有否证件
                schoolNote2: "", // 备注
                schoolName3: "", // 学校名称  
                schoolMajor3: "", // 专业
                schoolEducation3: "", // 学历
                admission3: "", // 入学年月 
                graduation3: "", // 离校年月
                graduationStatus3: "", // 毕业或结业
                hasCertificate3: "", // 有否证件
                schoolNote3: "", // 备注
                companyName: "", // 单位名称
                join: "", // 到职年月
                leave: "", // 离职年月
                jobTitle: "", // 工作职务
                baseSalary: "", // 底薪
                directSupervisor: "", // 直系主管
                leaveReason: "", // 离职原因
                inquiryPhone: "", // 查询电话
                companyName2: "", // 单位名称
                join2: "", // 到职年月
                leave2: "", // 离职年月
                jobTitle2: "", // 工作职务
                baseSalary2: "", // 底薪  
                directSupervisor2: "", // 直系主管
                leaveReason2: "", // 离职原因
                inquiryPhone2: "", // 查询电话
                companyName3: "", // 单位名称 
                join3: "", // 到职年月
                leave3: "", // 离职年月
                jobTitle3: "", // 工作职务
                baseSalary3: "", // 底薪
                directSupervisor3: "", // 直系主管
                leaveReason3: "", // 离职原因
                inquiryPhone3: "", // 查询电话
                familyName: "", // 姓名
                familyRelation: "", // 关系
                familyAge: "", // 年龄
                familyAddress: "", // 通讯地址
                familyPhone: "", // 电话
                familyName2: "", // 姓名
                familyRelation2: "", // 关系
                familyAge2: "", // 年龄
                familyAddress2: "", // 通讯地址
                familyPhone2: "", // 电话
                familyName3: "", // 姓名
                familyRelation3: "", // 关系
                familyAge3: "", // 年龄
                familyAddress3: "", // 通讯地址
                familyPhone3: "", // 电话
                workExperienceDetail: "", // 详述工作经验
                signature: null, // 签名
                signYear: "", // 签名日期年
                signMonth: "", // 签名日期月
                signDay: "",
            },
            index: length - 1,
            educations: [],
            works: [],
            families: [],
            type: '',
            formData: '',
        };
    },
    watch: {
        isEditMode: {
            immediate: true,
            handler(newVal) {
                document.documentElement.style.setProperty('--upload-pointer-events', newVal ? 'auto' : 'none');
                document.documentElement.style.setProperty('--upload-opacity', newVal ? '1' : '0.7');
                document.documentElement.style.setProperty('--preview-delete-display', newVal ? 'block' : 'none');
            }
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.type = this.$route.params.mode;
        this.formData = this.$route.params.data;
        this.isEditMode = this.type === 'edit' || this.type === 'add';
        // 如果是从流程页面跳转过来的，设置为非编辑模式
        if (this.type === 'add') {
            console.log("formData22222", this.formData);
            // 如果有表单数据，加载数据
            if (this.formData) {
                this.loadFormData(this.formData);
            }
        } else if (this.type === 'edit') {
            if (this.id) {
                this.fetchEmployeeDetail(this.id);
            }
        } else if (this.type === 'view') {
            this.isEditMode = false;
            if (this.id) {
                this.fetchEmployeeDetail(this.id);
            }
        }
    },
    methods: {
        printForm() {
            window.print()
        },
        // 添加获取详情的方法
        async fetchEmployeeDetail(id) {
            try {
                const response = await getEmployeeFileDetail(id);
                if (response.data.code === 200) {
                    const data = response.data.data;
                    this.id = id;
                    this.loadFormData(data);
                } else {
                    this.$message.error(response.data.message || "获取详情失败");
                }
            } catch (error) {
                console.error("获取员工详情失败:", error);
                this.$message.error("获取员工详情失败");
            }
        },
        loadFormData(data) {
            // 回显基本数据
            this.entr = {
                ...this.entr,
                id: data.id || '',
                // 基本信息
                applicationPosition: data.applicationPosition || '',
                applicationYear: data.applicationYear || '',
                applicationMonth: data.applicationMonth || '',
                applicationDay: data.applicationDay || '',
                name: data.name || '',
                gender: data.gender || '',
                birth: `${data.birthYear || ''}年${data.birthMonth || ''}月${data.birthDay || ''}日`,
                hometown: data.hometown || '',
                height: data.height || '',
                educationLevel: data.educationLevel || '',
                major: data.major || '',
                graduationSchool: data.graduationSchool || '',
                married: data.married || '',
                healthCondition: data.healthCondition || '',
                language: data.language || '',
                languageLevel: data.languageLevel || '',
                otherSkills: data.otherSkills || '',
                specialty: data.specialty || '',
                currentAddress: data.currentAddress || '',
                contactPhone: data.contactPhone || '',
                jobInfoSource: data.jobInfoSource || '',
                expectedSalary: data.expectedSalary || '',
                earliestStartYear: data.earliestStartYear || '',
                earliestStartMonth: data.earliestStartMonth || '',
                earliestStartDay: data.earliestStartDay || '',
                emergencyContactName: data.emergencyContactName || '',
                emergencyContactRelation: data.emergencyContactRelation || '',
                emergencyContactAddress: data.emergencyContactAddress || '',
                emergencyContactPhone: data.emergencyContactPhone || '',
                workExperienceDetail: data.workExperienceDetail || '',  // 添加工作经验详情
                signature: data.signature || '',
                signYear: data.signYear || '',
                signMonth: data.signMonth || '',
                signDay: data.signDay || ''
            }
            // 如果有照片URL，显示照片
            if (data.imageUrl) {
                this.uploadSpanDisplay = 'none'
                this.previewSpanDisplay = 'block'
                console.log("data.imageUrl2222", data.imageUrl);
                // 设置预览图片
                const previewImg = document.getElementById('preview')
                if (previewImg) {
                    previewImg.src = data.imageUrl
                }
                // this.previewImageSrc=data.imageUrl
                this.entr.imageUrl = data.imageUrl
            }

            // 加载教育经历
            this.educations = data.educations?.map(edu => ({
                schoolName: edu.schoolName || '',
                major: edu.major || '',
                education: edu.education || '',
                admission: `${edu.admissionYear || ''}年${edu.admissionMonth || ''}月`,
                graduation: `${edu.graduationYear || ''}年${edu.graduationMonth || ''}月`,
                graduationStatus: edu.graduationStatus || '',
                hasCertificate: edu.hasCertificate || '',
                note: edu.note || ''
            })) || []

            // 加载工作经历
            this.works = data.works?.map(work => ({
                companyName: work.companyName || '',
                join: `${work.joinYear || ''}年${work.joinMonth || ''}月`,
                leave: `${work.leaveYear || ''}年${work.leaveMonth || ''}月`,
                jobTitle: work.jobTitle || '',
                baseSalary: work.baseSalary || '',
                directSupervisor: work.directSupervisor || '',
                leaveReason: work.leaveReason || '',
                inquiryPhone: work.inquiryPhone || ''
            })) || []

            // 加载家庭成员
            this.families = data.families?.map(family => ({
                name: family.name || '',
                relation: family.relation || '',
                age: family.age || '',
                address: family.address || '',
                title: family.title || '',
                phone: family.phone || ''
            })) || []
        },
        handleImageUpload(event) {
            if (!this.isEditMode) return;  // 非编辑模式下不允许上传

            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previewImageSrc = e.target.result;
                    this.uploadSpanDisplay = 'none';
                    this.previewSpanDisplay = 'block';
                    this.entr.imageUrl = e.target.result;  // 保存图片数据
                };
                reader.readAsDataURL(file);
            }
        },
        deleteImage(event) {
            if (!this.isEditMode) return;  // 非编辑模式下不允许删除

            event.preventDefault();
            this.previewImageSrc = '';
            this.uploadSpanDisplay = 'block';
            this.previewSpanDisplay = 'none';
            this.entr.imageUrl = '';  // 清除图片数据
        },
        downloadPdf() {
            const element = document.getElementById("content");
            const opt = {
                margin: 10, // 适当增加边距
                filename: "员工入职资料表.pdf",
                image: { type: "", quality: 0.98 },
                html2canvas: { scale: 1.1 }, // 调整缩放比例
                jsPDF: { unit: "mm", format: "A4", orientation: "portrait" }, // 设置为 A4 格式
            };
            html2pdf().from(element).set(opt).save();
        },
        goToList() {
            this.$router.push('/main/renshi/dangan/employeeFileList');
        },
        goBack() {
            this.$router.go(-1);
        },
        // 添加保存方法
        async saveData() {
            try {
                // 处理出生日期
                const birthMatch = this.entr.birth?.match(/(\d+)年(\d+)月(\d+)日/);
                const birthYear = birthMatch ? birthMatch[1] : '';
                const birthMonth = birthMatch ? birthMatch[2] : '';
                const birthDay = birthMatch ? birthMatch[3] : '';

                // 处理最早到职日期
                const earliestStartYear = this.entr.earliestStartYear;
                const earliestStartMonth = this.entr.earliestStartMonth;
                const earliestStartDay = this.entr.earliestStartDay;

                // 只包含后端 VO 类中定义的字段
                const submitData = {
                    id: this.id,
                    gender: this.entr.gender || '',
                    graduationSchool: this.entr.graduationSchool || '',
                    signMonth: this.entr.signMonth || '',
                    jobInfoSource: this.entr.jobInfoSource || '',
                    name: this.entr.name || '',
                    languageLevel: this.entr.languageLevel || '',
                    earliestStartDay: earliestStartDay,
                    applicationMonth: this.entr.applicationMonth || '',
                    imageUrl: this.entr.imageUrl || '',
                    language: this.entr.language || '',
                    applicationPosition: this.entr.applicationPosition || '',
                    signYear: this.entr.signYear || '',
                    birthYear,
                    birthDay,
                    healthCondition: this.entr.healthCondition || '',
                    expectedSalary: this.entr.expectedSalary || '',
                    emergencyContactAddress: this.entr.emergencyContactAddress || '',
                    height: this.entr.height || '',
                    emergencyContactRelation: this.entr.emergencyContactRelation || '',
                    applicationDay: this.entr.applicationDay || '',
                    applicationYear: this.entr.applicationYear || '',
                    contactPhone: this.entr.contactPhone || '',
                    hometown: this.entr.hometown || '',
                    otherSkills: this.entr.otherSkills || '',
                    married: this.entr.married || '',
                    signature: this.entr.signature || '',
                    major: this.entr.major || '',
                    emergencyContactName: this.entr.emergencyContactName || '',
                    currentAddress: this.entr.currentAddress || '',
                    educationLevel: this.entr.educationLevel || '',
                    specialty: this.entr.specialty || '',
                    birthMonth,
                    emergencyContactPhone: this.entr.emergencyContactPhone || '',
                    earliestStartYear: earliestStartYear,
                    earliestStartMonth: earliestStartMonth,
                    signDay: this.entr.signDay || '',
                    workExperienceDetail: this.entr.workExperienceDetail || '',
                    // 处理教育经历
                    educations: (this.educations || []).map(edu => {
                        const admissionMatch = edu.admission?.match(/(\d+)年(\d+)月/);
                        const graduationMatch = edu.graduation?.match(/(\d+)年(\d+)月/);
                        return {
                            schoolName: edu.schoolName || '',
                            major: edu.major || '',
                            education: edu.education || '',
                            admissionYear: admissionMatch ? admissionMatch[1] : '',
                            admissionMonth: admissionMatch ? admissionMatch[2] : '',
                            graduationYear: graduationMatch ? graduationMatch[1] : '',
                            graduationMonth: graduationMatch ? graduationMatch[2] : '',
                            graduationStatus: edu.graduationStatus || '',
                            hasCertificate: edu.hasCertificate || '',
                            note: edu.note || ''
                        };
                    }),
                    // 处理工作经历
                    works: (this.works || []).map(work => {
                        const joinMatch = work.join?.match(/(\d+)年(\d+)月/);
                        const leaveMatch = work.leave?.match(/(\d+)年(\d+)月/);
                        return {
                            companyName: work.companyName || '',
                            joinYear: joinMatch ? joinMatch[1] : '',
                            joinMonth: joinMatch ? joinMatch[2] : '',
                            leaveYear: leaveMatch ? leaveMatch[1] : '',
                            leaveMonth: leaveMatch ? leaveMatch[2] : '',
                            jobTitle: work.jobTitle || '',
                            baseSalary: work.baseSalary || '',
                            directSupervisor: work.directSupervisor || '',
                            leaveReason: work.leaveReason || '',
                            inquiryPhone: work.inquiryPhone || ''
                        };
                    }),
                    // 处理家庭成员
                    families: (this.families || []).map(family => ({
                        name: family.name || '',
                        relation: family.relation || '',
                        age: family.age || '',
                        address: family.address || '',
                        title: family.title || '',
                        phone: family.phone || ''
                    }))
                };

                console.log('提交的数据：', submitData);  // 添加日志
                const response = await saveOrUpdateEmployeeFile(submitData);
                if (response.data.code === 200) {
                    this.$message({
                        type: 'success',
                        message: this.id ? '编辑成功' : '保存成功',
                        duration: 2000
                    });
                    this.$router.push('/main/renshi/dangan/employeeFileList');
                } else {
                    this.$message.error(response.data.message || '保存失败');
                }
            } catch (error) {
                console.error('保存失败:', error);
                console.error('错误详情:', error.response?.data);  // 添加更详细的错误日志
                this.$message.error(error.response?.data?.message || '保存失败');
            }
        },
        // 添加新的教育经历
        addEducation(e) {
            e?.preventDefault();
            const newEducation = {
                schoolName: '',
                major: '',
                education: '',
                admission: '',
                graduation: '',
                graduationStatus: '',
                hasCertificate: '',
                note: ''
            };
            this.educations = [...this.educations, newEducation];
        },
        // 添加新的工作经历
        addWork(e) {
            e?.preventDefault();
            const newWork = {
                companyName: '',
                join: '',
                leave: '',
                jobTitle: '',
                baseSalary: '',
                directSupervisor: '',
                leaveReason: '',
                inquiryPhone: ''
            };
            this.works = [...this.works, newWork];
        },
        // 添加新的家庭成员
        addFamily(e) {
            e?.preventDefault();
            const newFamily = {
                name: '',
                relation: '',
                age: '',
                address: '',
                title: '',
                phone: ''
            };
            this.families = [...this.families, newFamily];
        },
    },
};
</script>
<style lang="scss" scoped>
// body {
//     /* font-size: 14px !important; */
//     margin: 0;
//     padding: 0;
//     // background-color: #f0f2f5;
// }

.container {
    font-family: "宋体";
    max-width: 1200px;
    margin: 0px auto;
    padding: 40px;
    // background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* 输入框通用样式 */
input {
    width: calc(100% - 24px);
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    color: #606266;
    background-color: #fff;
    transition: all 0.3s ease;
    margin: 4px 0;
    box-sizing: border-box;
}

input:focus {
    border-color: #409EFF;
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 表格单元格样式 */
td,
th {
    border: 1px solid #dcdfe6;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    color: #606266;
    height: auto;
    min-height: 44px;
    vertical-align: middle;
    position: relative;
}

/* 表格内的输入框样式 */
td input {
    width: calc(100% - 16px);
    margin: 2px 8px;
    height: 32px;
}

/* 下划线输入框样式 */
.underline-input {
    border: none;
    border-bottom: 1px solid #dcdfe6;
    border-radius: 0;
    width: 200px;
    padding: 4px 8px;
    margin: 0 12px;
    height: 32px;
}

.underline-input1 {
    border: none;
    border-bottom: 1px solid #dcdfe6;
    border-radius: 0;
    width: 40px;
    padding: 4px;
    text-align: center;
    margin: 0 8px;
    height: 32px;
}

/* 文本区域样式 */
textarea {
    width: calc(100% - 24px);
    min-height: 120px;
    padding: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    resize: vertical;
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
    margin: 12px 0;
    box-sizing: border-box;
}

/* 弹性布局容器 */
.flex-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

/* 右浮动容器 */
.right-float {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-right: 12px;
}

/* 左浮动容器 */
.left-float {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
    color: #303133;
    font-weight: 500;
}

/* 图片上传区域 */
.img {
    padding: 16px;
    background: #f5f7fa;
    border-radius: 4px;
    text-align: center;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    gap: 12px;
    min-height: 200px;
    // justify-content: center;
    width: 200px;

}

.upload-area {
    width: 35mm;
    height: 49mm;
    border: 2px dashed #dcdfe6;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    pointer-events: var(--upload-pointer-events);
    opacity: var(--upload-opacity);
}

.upload-area:hover {
    border-color: #409EFF;
    background-color: rgba(64, 158, 255, 0.05);
}

.upload-icon {
    font-size: 28px;
    color: #909399;
    margin-bottom: 8px;
}

.upload-text {
    color: #909399;
    font-size: 14px;
}

.upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.preview-container {
    position: relative;
    width: 35mm;
    height: 49mm;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.preview-actions {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    display: flex;
    gap: 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
    width: 100%;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.3s;
}

.preview-container:hover .preview-actions {
    opacity: 1;
}

.preview-delete {
    display: var(--preview-delete-display);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    margin: 0;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.preview-delete:hover {
    color: #f56c6c;
}

.delete-icon {
    font-size: 16px;
    font-style: normal;
}

/* 签名区域 */
.signature-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid #dcdfe6;
    gap: 16px;
}

/* 其他已有样式保持不变 */
button {
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

#convertButton {
    background-color: #409EFF;
    color: white;
}

#convertButton:hover {
    background-color: #66b1ff;
}

button[style*="margin-left"] {
    background-color: #909399;
    color: white;
}

button[style*="margin-left"]:hover {
    background-color: #a6a9ad;
}

h2 {
    text-align: center;
    margin: 0 0 40px 0;
    padding: 0;
    font-size: 26px;
    color: #303133;
    font-weight: 600;
}

form {
    margin-top: 20px;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 25px 0;
    border: 1px solid #dcdfe6;
}

td[colspan="10"][style*="text-align: left"] {
    background-color: #f5f7fa;
    padding-left: 20px;
    font-weight: 500;
    color: #303133;
}

textarea:focus {
    border-color: #409EFF;
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

#preview {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

#deleteBtn {
    background-color: #f56c6c;
    color: white;
    padding: 6px 12px;
    font-size: 12px;
    margin: 8px 0;
}

#deleteBtn:hover {
    background-color: #f78989;
}

#workExperience {
    width: calc(100% - 24px);
    min-height: 120px;
    padding: 12px;
    box-sizing: border-box;
    resize: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
    color: #606266;
    background-color: #fff;
    margin: 10px 0;
}

::placeholder {
    color: #909399;
}

.add-row-btn,
.delete-btn {
    display: none;
}

/* 输入框尺寸类 */
.input-mini {
    width: 60px !important;
    padding: 4px 8px !important;
}

.input-small {
    width: 80px !important;
    padding: 4px 8px !important;
}

.input-medium {
    width: 120px !important;
    padding: 4px 8px !important;
}

.input-large {
    width: 180px !important;
    padding: 4px 8px !important;
}

.input-xlarge {
    width: 240px !important;
    padding: 4px 8px !important;
}

.language-cell {
    /* display: flex; */
    /* align-items: center; */
    white-space: nowrap;
    gap: 4px;
    padding: 8px 12px;
}

.language-cell input {
    margin: 0 4px;
}

/* 调整表格单元格内容垂直居中 */
td {
    vertical-align: middle;
}

/* 调整输入框的基础样式 */
input {
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
    text-align: left;
}

input:focus {
    border-color: #409EFF;
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.button-group {
    position: absolute;
    right: 10px;
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.save-button {
    background-color: #67c23a;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.save-button:hover {
    background-color: #85ce61;
}

/* 添加编辑模式相关样式 */
input:not([readonly]) {
    background-color: #fff;
    cursor: text;
    border: 1px solid #dcdfe6;
    text-align: center;
}

input:not([readonly]):focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 只读模式样式 */
input[readonly] {
    background-color: #f5f7fa;
    cursor: not-allowed;
    border: 1px solid #e4e7ed;
    text-align: center;
}

input[readonly]:focus {
    border-color: #e4e7ed;
    box-shadow: none;
}

/* 编辑模式下的按钮样式 */
.save-button {
    background-color: #67c23a;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.save-button:hover {
    background-color: #85ce61;
}

.add-row-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin: 10px 0;
    transition: all 0.3s ease;
}

.add-row-btn:hover {
    background-color: #66b1ff;
}

@media print {
    .container {
        padding: 20px 10px 20px 1px;
        margin-right: 5px;
        box-shadow: 0 0px 0px rgba(255, 255, 255, 0) !important;
    }

    .button-group {
        display: none;
    }

    .zenbu-container {
        padding: 0px;
        background: none;
        width: 750px;
    }

    .page-header {
        .header-actions {
            display: none;
        }
    }

    .main-form {
        box-shadow: none;
        padding: 10px;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
    }

    input {
        border: none !important;
        background-color: transparent !important;
        text-align: center;
    }

    textarea {
        border: 0px !important;
    }
}
</style>